<%--
  Created by IntelliJ IDEA.
  User: 18055243628
  Date: 2022/5/2
  Time: 17:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>图书管理系统</title>
    <link href="css/login.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        <%--attr设置属性值或获取属性值--%>
        function reloadImage(){
            $("#image").attr("src","image.jsp?t="+(new Date).getTime());
        }

        $(document).ready(function (){
            $("#checkcodeId").blur(function (){
                <%-- val() 方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。--%>
                var $checkcode=$("#checkcodeId").val();
                //校验：文本框的值发送到服务器
                $.post(
                    "CheckCodeServlet",
                    "checkcode="+$checkcode,
                    function (result){ //result存放图片判断地址
                        var $resultHtml=$("<img src='"+result+"' height='25px' width='30px'/>");
                        $("#tip").html($resultHtml);
                        if(result=="icon/wrong.jpg"){
                            //禁用按钮
                            $("#login_bu").attr("disabled","disabled");
                        }else{
                            $("#login_bu").removeAttr("disabled");
                        }
                    }
                );
            });
        });
    </script>
</head>
<body>
<div class="wrap">
    <!-- 头部导航-->
    <div class="head">
        <div class="logo-left">
            <a href="#"><img src="icon/logo.jpg" /></a>
        </div>
        <div id="word">
            <a href="#" ><h1 class="logo-right">欢迎登录</h1></a>
        </div>
    </div>

    <!--中间内容 -->
    <div class="content">
        <div class="article">
            <div class="box">
                <form action="LoginServlet" method="post">
                    <div class="login">
                        <h2>用户登录<a href="register.jsp">免费注册</a></h2>
                    </div>
                    <div class="item">
                        <label class="name"></label>
                        <input type="text" name="id" required="required" placeholder="<%=(session.getAttribute("logining")==null&&session.getAttribute("user")==null)?"账户":"请确认用戶ID"%>"/>
                    </div>
                    <div class="item">
                        <label class="pwd"></label>
                        <input type="password" name="pwd" required="required" placeholder="请确认用戶密码"/>
                    </div>
                    <div class="checkcode">
                        <input type="text" name="checkcode" id="checkcodeId" size="4"/>
                        <!--点击超链接不跳转 执行函数 -->
                        <a href="javascript:reloadImage();"><img id="image"  src="image.jsp"/></a>
                        <span id="tip"></span>
                    </div>
                    <div class="button">
                        <input type="submit" id="login_bu" disabled="disabled" value="登录"/>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!--尾部内容-->
    <div class="footer">
        <div class="foot">
            Copyright &copy; 2022-2032 SSPU-lyx.com 版权所有
        </div>
    </div>

</div>
</body>
</html>
